<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>古籍的详细信息</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
</head>
<style>
    body{
        background-image: url("image/background_img.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
</style>
<body>
    <header id="header"></header>

    <div class="container" id="ancientDetail">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="ancientBook.html">古籍的详细信息</a></li>
                <li class="breadcrumb-item active" aria-current="page" v-text="detail.title">只愿君心似我心，定不负相思意</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col col-sm-12 col-lg-12">

                <div class="card">
                    <div class="card-header">
                        <h3>《<span style="color: #7D551D;font-size: 25px;font-weight: bold" v-text="detail.title">只愿君心似我心，定不负相思意</span>》</h3>
                    </div>
                    <div class="card-body">
                        <div class="card-body d-flex">
                            <img class="mr-3" style="height:8rem;" :src="'image'+detail.litpic" />
                            <div>
                                <p v-html="detail.info">
                                    李流芳（1575～1629）明代诗人、书画家。字长蘅，一字茂宰，号檀园、香海、古怀堂、沧庵，晚号慎娱居士、六浮道人。歙县（今属安徽）人，侨居嘉定（今属上海市）。三十二岁中举人，后绝意仕途。诗文多写景酬赠之作，风格清新自然。与唐时升、娄坚、程嘉燧合称“嘉定四先生”。擅画山水，学吴镇、黄公望，峻爽流畅，为“画中九友”之一。亦工书法。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h6 style="font-weight: bolder;color: #7D551D;text-align: center;font-size: 25px">《<span v-text="detail.title"></span>》 章节目录</h6>
                    </div>
                    <div class="card-body" style="font-weight: bold;font-size: 15px" v-for="(value,key) in map" :key="key">
                        <div class="card-title" v-text="key">「<span>周记</span>」</div>
                        <ul class="d-flex flex-row flex-wrap align-items-center w-100">
                            <li style="font-size: 15px;width: 30%" v-for="v in value">
                                <a :href="'ChapterContent.html?'+v.id" v-text="v.title">浣溪沙</a>
                            </li>
                        </ul>
                        <p class="dropdown-divider"></p>
                    </div>
                </div>

            </div>
        </div>
    </div>

        <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    var id = location.search.split("?")[1]

    let vm_detail = new Vue({
        el:"#ancientDetail",
        data:{
            detail:{},
            map:{}
        },
        methods:{
            findOneById:function(){
                axios({
                    url:"/djList/selectOne/"+id,
                    method:"post"
                }).then(function (r) {
                    vm_detail.detail = r.data
                    console.log("获取的内容:"+JSON.stringify(r.data))
                })
            },
            findAllById:function () {
                axios({
                    url:"/djInfo/select/"+id,
                    method:"post"
                }).then(function (r) {
                    vm_detail.detail = r.data
                    //console.log("获取的内容:"+JSON.stringify(r.data))
                })
            },
            findMainType:function () {
                axios({
                    url:"/booklei/selectList/"+id,
                    method:"post"
                }).then(function (r) {
                    vm_detail.map = r.data;
                    console.log("map对象: -> "+JSON.stringify(vm_detail.map))
                })
            }
        },
        created:function () {
            this.findOneById();
            this.findMainType();
        }
    })
</script>
</html>